<template>
  <div>

<myheader></myheader>


	<section class="featured-block text-center">
		<div class="container">
			<div class="row">
				<div class="col-md-6 text-center">
					<div class="product-image mt-3">
						<img class="img-fluid" :src="src">
					</div>
					<div class="product-thumbnails"><a href="#">
						<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
							<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
							<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
							<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
						<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a></div>
				</div>
				<div class="col-md-6 mt-5 mt-md-2 text-center text-md-left">
					<h2 class="mb-3 mt-0">{{ name }}</h2>
					<p class="lead mt-2 mb-3 primary-color">${{ price }}</p>
					<h5 class="mt-4">商品简介</h5>
					<p>{{ desc }}</p>

          <p>颜色:{{ color }}</p>
          <p>号码:{{ size }}</p>
          <p>季节:{{ season }}</p>


					<select class="custom-select form-control mt-4 mb-4">
						<option selected>Size</option>
						<option value="1">Small</option>
						<option value="2">Medium</option>
						<option value="3">Large</option>
					</select>

					<!--Quantity: <input type="text" class="form-control quantity mb-4" name="" value="1">-->

					<a href="#" class="btn btn-full-width btn-lg btn-outline-primary">Add to cart</a></div>
			</div>
		</div>
	</section>

    <div class="divider"></div>
    <!--组件-->
    <section class="products text-center">
		<div class="container">

    <comment></comment>

		</div>
	</section>

    <!--<section class="products text-center">-->
		<!--<div class="container">-->
      <!--<textarea v-model="content"></textarea>-->
      <!--<br>-->
      <!--<br>-->
      <!--<Button color="blue" @click="comment">开始评论</Button>-->

      <!--&lt;!&ndash;通过冒号传参&ndash;&gt;-->
      <!--<comment2 :commentlist="this.commentlist" :myuser="this.myuser"></comment2>-->

		<!--</div>-->
	<!--</section>-->

	<div class="divider"></div>

	<section class="products text-center">
		<div class="container">
			<h3 class="mb-4">Related Products</h3>
			<div class="row">
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
			</div>
		</div>
	</section>

	<footer class="footer">
		<div class="container">
			@v3u.cn
		</div>


	</footer>

  </div>

</template>



<script>
import myheader from './myheader';
import comment from './comment';
// import comment2 from './comment2'

export default {
  data () {
    return {
      msg: "这是一个变量",
      //商品ID
      id:'',
      name:'',
      price:'',
      desc:'',
      color:'',
      size:'',
      season:'',
      img:'',
      src:'',
      // // 评论内容
      content:'',
      // //评论列表容器
      commentlist:[],
      // //用户信息字典
      myuser:{},
    }
  },

  // 自定义过滤器
  // filters:{
  //   //自定义方法
  //   myfilter:function (value) {
  //     // 通过key（用户ID）取用户名   学名：管道式调用 |
  //     return window.that.myuser[value];
  //   }
  // },


  //注册组件标签
  components:{
    'myheader':myheader,
    'comment': comment
    // comment2
  },

  //在渲染之前就定义that变量
  beforeCreate:function(){
     window.that = this;
  },

  mounted:function(){

    // 接收商品ID
    var id = this.$route.query.id;
    this.id = id;
    // console.log(id)

    // 调用接口
    this.getdata();

    // // 调用评论接口
    // this.get_comment();
    //
    // // 调用用户列表接口
    // this.get_user();


},
  methods:{
    // // 调用所以用户列表
    // get_user:function(){
    //   //发送请求
    //   this.axios.get(
    //       'http://127.0.0.1:8000/userlist/').then(res=>{
    //         console.log(res);
    //         //动态赋值
    //         for(let i=0, l=res.data.length; i<l; i++){
    //           this.myuser[res.data[i].id] = res.data[i].username;
    //         }
    //         console.log(this.myuser)
    //     });
    // },
    //
    // //
    // // 调用评论列表
    // get_comment:function(){
    //   //发送请求
    //   this.axios.get(
    //       'http://127.0.0.1:8000/commentlist/',{params:{id: this.id}}).then(res=>{
    //         console.log(res);
    //         //赋值
    //         this.commentlist = res.data
    //
    //     });
    // },
    //
    //
    // //评论方法
    // comment:function(){
    //
    //   if(this.content === ''){
    //     this.$Message('评论内容不能为空');
    //     return false;
    //   }
    //
    //   //发送请求
    //   this.axios.post(
    //       'http://127.0.0.1:8000/insertcomment/',this.qs.stringify({content: this.content, uid:localStorage.getItem('uid'), gid:this.id})).then(res=>{
    //         console.log(res);
    //         if(res.data.code===200){
    //           this.$Message(res.data.msg);
    //
    //           // 将评论内容和作者实时填充到评论容器中
    //           this.commentlist.unshift(({"uid":localStorage.getItem('uid'), 'content': this.content}));
    //
    //           this.content='';
    //         }
    //
    //     });
    // },



    getdata:function(){
      // 商品信息接口
        this.axios.get(
          'http://127.0.0.1:8000/goodinfo/',{params:{id:this.id}}).then(res=>{
            console.log(res);
            this.name = res.data.name;
            this.desc = res.data.desc;
            this.price = res.data.price;
            this.img = res.data.img;

            //赋值
            var parms = res.data.parms;
            //字符串转换JSON类型
            parms = JSON.parse(parms);
            this.color = parms.color;
            this.size = parms.size;
            this.season = parms.season;
            this.src = 'http://127.0.0.1:8000/static/upload/' + res.data.img
            console.log(parms)
        });
    },

  }
}


</script>

<style>



</style>
